<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
</head>
<style>
    body {
        margin: 0 auto;
        background-image: url(images/3.jpg);
        /* background-size: cover; */
        background-repeat: no-repeat;
    }
    
    .login {
        /* margin-left: 1000px; */
        margin-left: 300px;
        width: 400px;
        background: #ffffff;
        border-radius: 10px;
        min-height: 450px;
        border: #ccc 1px solid;
        /* padding-top: 10px; */
        margin-top: 70px;
    }
    
    .login-bg {
        background: #ffffff;
        padding: 30px;
        min-height: 450px;
    }
    
    .login_Box {
        width: 100%;
        background: #ffffff;
    }
    
    .login_Box .hd {
        height: 30px;
        position: relative;
    }
    
    .login_Box .hd ul {
        list-style: none;
    }
    
    .login_Box .hd ul li {
        width: 100px;
        float: left;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
        border-right: 1px solid #dddddd;
    }
    /* .login_Box .hd ul li.on {
        color: #ff0000;
    } */
    
    .login_Box .bd ul {
        padding: 0px;
        display: block;
        clear: both;
        width: 100%;
    }
    /*相关的表单格式*/
    
    .login-bg .message {
        margin: 0;
        padding-bottom: 20px;
        background: #ffffff;
        position: relative;
        color: #333;
        font-size: 14px;
    }
    
    .login-bg .login-bg_tit {
        padding-right: 10px;
        line-height: 30px;
        position: relative;
        color: #666666;
        font-size: 13px;
        text-align: center;
    }
    
    .login-bg input[type=number],
    .login-bg input[type=text],
    .login-bg input[type=file],
    .login-bg input[type=password],
    .login-bg input[type=email],
    .login-bg select {
        border: 1px solid #DCDEE0;
        vertical-align: middle;
        border-radius: 3px;
        height: 50px;
        padding: 0px 16px;
        font-size: 16px;
        color: #555555;
        outline: none;
        width: 100%;
        box-sizing: border-box;
    }
    
    .login-bg input[type=text]:focus,
    .login-bg input[type=number]:focus,
    .login-bg input[type=file]:focus,
    .login-bg input[type=password]:focus,
    .login-bg input[type=email]:focus,
    select:focus {
        border: 1px solid #27A9E3;
    }
    
    .login-bg button,
    .login-bg input[type=submit],
    .login-bg input[type=button] {
        display: inline-block;
        vertical-align: middle;
        padding: 12px 24px;
        margin: 0px;
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        color: #ffffff;
        background-color: #d00000;
        border-radius: 3px;
        border: none;
        -webkit-appearance: none;
        outline: none;
        width: 100%;
    }
    
    .login-bg textarea {
        width: 100%;
        height: 70px;
        font-size: 13px;
        border: 1px solid #DCDEE0;
        padding: 10px 20px;
        vertical-align: middle;
        border-radius: 3px;
    }
    
    .login-bg .inputtit {
        font-size: 16px;
        text-transform: none;
    }
    
    .login-bg hr {
        background: #fff;
    }
    
    .login-bg hr.hr15 {
        height: 15px;
        border: none;
        margin: 0px;
        padding: 0px;
        width: 100%;
    }
    
    .login-bg hr.hr20 {
        height: 40px;
        border: none;
        margin: 0px;
        padding: 0px;
        width: 100%;
    }
    /*小按钮*/
    
    .login-bg .anniu {
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        margin: 0px;
        line-height: 15px;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        cursor: pointer;
        color: #ffffff;
        background-color: #d58512;
        border-radius: 3px;
        border: none;
        -webkit-appearance: none;
        outline: none;
        height: 35px;
        font-size: 14px;
        padding: 10px;
    }
    
    .login-bg .submit_item {
        padding: 20px 0;
        margin-top: 20px;
        text-align: center;
    }
    
    .login-bg .yanzhengma {
        width: 50%;
        font-size: 13px;
        float: left;
    }
    
    .login-bg .yanzhengma input {
        background: url(images/smallicon4.png) left center no-repeat;
        background-position: 5px;
        padding-left: 35px;
    }
    
    .login-bg .pass input {
        background: url(images/smallicon2.png) left center no-repeat;
        background-position: 5px;
        padding-left: 35px;
    }
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
    $(function() {
        $(".bd>ul").first().siblings().hide();
        $(".hd>ul>li").each(function(i) {
            $(this).click(function() {
                $(".bd>ul").eq(i).show();
                $(".bd>ul").eq(i).siblings().hide();
            });
        });
        $(".anniu").click(function() {
            //判断一下 手机号的格式是否正确
            var reg = /^1([3-9])\d{9}$/;
            if (reg.test($("#phone").val())) {
                $.ajax({
                    url: 'test.txt', //服务器地址
                    type: 'GET',
                    data: '',
                    dataType: 'text',
                    success: function(result) {
                        $("#messege").text("验证码已发送成功！" + result);
                        alert("成功调用ajax")
                    },
                    error: function() {
                        alert("失败")
                    }
                });
            } else {
                $("#messege").text("手机号格式错误!");
            }
        });
    });
</script>

<body>
    <div class="container">
        <div class="login">
            <div id="login_Box" class="login_Box">
                <div class="hd">
                    <ul>
                        <li>登录</li>
                        <li>手机验证码</li>
                    </ul>
                </div>
                <div class="bd">
                    <ul>
                        <div class="login-bg">
                            <div>
                                <form id="form1" name="form1" method="post" action="1.html">
                                    <hr class="hr20">

                                    <div class="login-bgitem">

                                        <div class="input_line">
                                            <input name="useruid" placeholder="请输入用户ID / 手机号" type="text" required style=" background: url(images/smallicon1.png) left center no-repeat; background-position: 5px;  padding-left: 35px;">
                                        </div>
                                    </div>
                                    <br>
                                    <div class="login-bgitem">
                                        <div class="input_line pass">
                                            <input name="userpwd" placeholder="请输入密码" required lay-verify="required" type="password" class="layui-input" style=" background: url(images/smallicon2.png) left center no-repeat; background-position: 5px;  padding-left: 35px;">
                                        </div>
                                    </div>
                                    <div class="clear"></div>
                                    <label> <span style="font-size: 12px; margin-left: 285px;">忘记密码?</span></label>
                                    <hr class="hr20">
                                    <input value="登录" name="useruidsubmit" style="background:#fb6703;width:100%; border-radius: 40px;" type="submit">
                                    <hr class="hr20">
                                    <div class="login-bg_tit" style="font-size: 12px;">登录即代表您同意我们的 <a href="#">服务协议</a> 和 <a href="#">隐私政策 </a></div>

                                </form>
                            </div>
                        </div>
                    </ul>
                    <ul>
                        <div class="login-bg " style="padding-top: 20px;">
                            <div id="messege" style=" height:20px;font-size: 12px;color: #ff0000; text-align: right;">
                                <!-- &nbsp; -->
                            </div>
                            <div>
                                <form id="form2" name="form2" method="post" action="1.html">
                                    <div style="border: #eeeeee 1px solid; overflow: hidden; margin-top: 25px;">
                                        <input name="phone" id="phone" placeholder="请输入手机号" type="number" required class="layui-input" value="" style=" background: url(images/smallicon3.png) left center no-repeat; background-position: 5px;  padding-left: 35px;border: none;">
                                    </div>

                                    <br>

                                    <div>
                                        <div style="width: 60%; float:left;   overflow: hidden;">
                                            <input name="telcode" placeholder="输入短信验证码" type="number" required class="layui-input" value="">
                                        </div>

                                        <div style="width: 40%; float: right;  overflow: hidden; text-align: right;">
                                            <button type="button" class="anniu" style="width: 100%; height: 47px; line-height: 24px;"> 获取短信验证码
                                            </button>
                                        </div>
                                    </div>
                                    <hr class="hr20">

                                    <input value="登录/注册" name="phonesubmit" lay-submit lay-filter="login" style="background:#fb6703;width:100%; border-radius: 40px;" type="submit">
                                    <hr class="hr15">
                                    <div class="login-bg_tit">首次用手机号和验证码登录，将自动注册</div>

                                </form>
                            </div>
                        </div>
                    </ul>

                </div>
            </div>
        </div>
    </div>

</body>

</html>